<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" [lvLabelColon]="false" class="formGroup">
    <lv-form-item>
        <lv-form-label>
            {{'protection_restore_to_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <lv-radio-group formControlName="restoreLocation">
                <lv-group [lvGutter]="'30px'">
                    <lv-group>
                        <lv-radio
                            [lv-tooltip]="!restoreToNewLocationOnly  ? '':(restoreType === RestoreType.InstanceRestore ?'protection_vm_origin_instance_restore_disabled_label':'protection_vm_origin_restore_disabled_label')| i18n"
                            [lvDisabled]="restoreToNewLocationOnly" [lvValue]=restoreLocationType.ORIGIN>
                            {{'common_restore_to_origin_location_label' |
                            i18n}}
                        </lv-radio>
                    </lv-group>
                    <lv-group>
                        <lv-radio [lvValue]=restoreLocationType.NEW>{{'common_restore_to_new_location_label' | i18n}}
                        </lv-radio>
                    </lv-group>
                </lv-group>
            </lv-radio-group>
        </lv-form-control>
    </lv-form-item>

    <ng-container *ngIf="formGroup.value.restoreLocation === restoreLocationType.ORIGIN">
        <lv-form-item>
            <lv-form-label>
                {{'protection_computer_location_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_origin_location_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <span lv-overflow
                    [ngClass]="restoreType === RestoreType.CommonRestore?'commonRestore-tip':'instanceRestore-tip'">{{originLocation
                    | nil}}</span>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <lv-form-label lvRequired>{{'protection_new_vm_name_label' | i18n}}</lv-form-label>
            <lv-form-control [lvErrorTip]="nameErrorTip">
                <input lv-input type="text" formControlName="name" />
            </lv-form-control>
        </lv-form-item>
        <!-- 磁盘文件 -->
        <lv-form-item>
            <lv-form-label>
                {{'protection_vm_disk_file_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_vm_disk_file_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <div class="location-gutter">
                    <lv-datatable lvSize="small" [lvPaginator]='page' [lvData]="originDiskData" #originStorageTable>
                        <thead>
                            <tr>
                                <th>{{'common_disk_name_label' | i18n}}</th>
                                <th>{{'common_slot_label' | i18n}}</th>
                                <th>{{'protection_disk_data_capacity_label' | i18n}}</th>
                                <th>{{'protection_vmware_restore_disktype_label' | i18n}}</th>
                                <th>{{'protection_tagert_database_label' | i18n}}</th>
                                <th width="180px" lvShowCustom>
                                    <div lv-overflow>
                                        <span>{{'protection_tagert_database_capacity_label' | i18n}}</span>
                                        <div class="custom-icon">
                                            <i lv-icon="aui-icon-help"
                                                lv-tooltip="{{'protection_tagert_database_capacity_help_label'| i18n}}"
                                                lvTooltipPosition="rightTop" lvColorState='true'></i>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let item of originStorageTable.renderData;">
                                <tr>
                                    <td>
                                        <span lv-overflow>{{item.NAME}}</span>
                                    </td>
                                    <td>{{item.BUSNUMBER}}</td>
                                    <td>{{ item.SIZE |
                                        capacityCalculateLabel:'1.1-3':unitconst.KB: true }}
                                    </td>
                                    <!-- 硬盘类型 -->
                                    <td>{{(item.DISKTYPE ==='rdm' ? 'protection_vmware_restore_rdm_type_label' :
                                        'protection_vmware_restore_normal_type_label') | i18n}}</td>
                                    <td>{{item.DSNAME}}</td>
                                    <td>{{ item.DSSIZE | capacityCalculateLabel:'1.1-3':unitconst.KB: true }}</td>
                                </tr>
                            </ng-container>
                        </tbody>
                    </lv-datatable>
                    <div class="aui-paginator-wrap">
                        <lv-paginator #page lvMode="simple" [lvPageSize]="pageSize" [lvShowPageSizeOptions]="false"
                            [hidden]="!storageDiskTableData?.length">
                        </lv-paginator>
                    </div>
                </div>
            </lv-form-control>
        </lv-form-item>
    </ng-container>

    <ng-container *ngIf="formGroup.value.restoreLocation === restoreLocationType.NEW">
        <lv-form-item>
            <lv-form-label lvRequired>{{'protection_new_vm_name_label' | i18n}}</lv-form-label>
            <lv-form-control [lvErrorTip]="nameErrorTip">
                <input lv-input type="text" formControlName="name" />
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <h2 class="aui-gutter-column-md">{{'common_location_label' | i18n}}</h2>
        </lv-form-item>
    </ng-container>
    <ng-container *ngIf="formGroup.value.restoreLocation === restoreLocationType.NEW">
        <lv-form-item
            [ngClass]="formGroup.value.restoreLocation === restoreLocationType.NEW?'computer-location-show':'computer-location-hidden'">
            <lv-form-label lvRequired>
                {{'protection_computer_location_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_computer_location_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <div [ngClass]="{'commonRestore-tip':restoreType === RestoreType.CommonRestore,'instanceRestore-tip':restoreType !== RestoreType.CommonRestore,'vm-location-placeHolder':!formGroup.value.location}"
                    lv-overflow>
                    {{formGroup.value.location
                    || ('protection_computer_location_vm_tip_label' | i18n)}}
                </div>
                <lv-group [lvColumns]='["16px", "auto"]' lvRowGutter="4px" class="rdm-recovery-tip aui-gutter-column-xs"
                    *ngIf="showRdmRecoveryTip">
                    <i lv-icon="lv-icon-status-info" lvColorState='true'></i>
                    <span>
                        {{'protection_vm_rdm_recovery_tip_label' | i18n}}
                    </span>
                </lv-group>
                <aui-computer-location [vmRestoreOptionType]="VmRestoreOptionType.VM" [copyData]="rowCopy"
                    (changeVcenter)='changeVcenter($event)' (changeLocation)='changeLocation($event)'
                    [type]="restoreType">
                </aui-computer-location>
            </lv-form-control>
        </lv-form-item>
    </ng-container>
    <ng-container *ngIf="formGroup.value.restoreLocation === restoreLocationType.NEW">
        <lv-form-item>
            <lv-form-label lvRequired>
                {{'protection_storage_location_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_storage_location_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <lv-radio-group formControlName="storage">
                    <lv-group [lvGutter]="'30px'">
                        <lv-group>
                            <lv-radio [lvValue]="DatastoreType.DIFFERENT">{{'protection_diff_database_label' | i18n}}
                            </lv-radio>
                        </lv-group>
                        <lv-group>
                            <lv-radio [lvValue]="DatastoreType.SAME">{{'protection_same_database_label' | i18n}}
                            </lv-radio>
                        </lv-group>
                    </lv-group>
                </lv-radio-group>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item *ngIf="formGroup.value.storage === DatastoreType.DIFFERENT">
            <lv-form-label lvRequired>
                {{'protection_vm_storage_location_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_vm_profile_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <lv-select formControlName="vmStorage" [lvOptions]='targetDatastoreOptions' lvValueKey='key'
                    [lvPlaceholder]="(datastoreNoData?'protection_restore_new_datastore_placeholder_label' :
                    'common_select_label') | i18n" lvShowFilter lvFilterKey="label" lvFilterMode="contains">
                </lv-select>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item *ngIf="formGroup.value.storage === DatastoreType.SAME">
            <lv-form-label lvRequired>
                {{'protection_tagert_database_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_tagert_database_help_label'| i18n}}"
                    lvTooltipPosition="rightTop" class="configform-constraint" lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <lv-select formControlName="targetDatastore" [lvOptions]='targetDatastoreOptions'
                    [lvContentTemplate]='contentTpl' [lvPlaceholder]="(datastoreNoData?'protection_restore_new_datastore_placeholder_label' :
                            'common_select_label') | i18n">
                    <lv-select-trigger>
                        <span>
                            <i [lv-tooltip]="formGroup.value.targetDatastore?.errorTip"
                                *ngIf="formGroup.value.targetDatastore?.errorTip" lv-icon='lv-icon-status-warning-info'
                                class="icon-warning"></i>
                            <span class="datastore-label same"
                                lv-overflow>{{formGroup.value.targetDatastore?.label}}</span></span>
                    </lv-select-trigger>
                    <ng-template #contentTpl let-item>
                        <div>
                            <i *ngIf="item.errorTip" [lv-tooltip]="item?.errorTip" lv-icon='lv-icon-status-warning-info'
                                class="icon-warning"></i>
                            <span class="datastore-label same" lv-overflow> {{item?.label}}</span>
                        </div>
                    </ng-template>
                </lv-select>
            </lv-form-control>
        </lv-form-item>
        <!-- 磁盘文件 -->
        <lv-form-item>
            <lv-form-label lvRequired>
                {{'protection_vm_disk_file_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_vm_disk_file_help_label' | i18n}}"
                    lvTooltipPosition="rightTop"  class="configform-constraint"
                    lvColorState='true'></i>
            </lv-form-label>
            <lv-form-control>
                <div class="location-gutter">
                    <lv-datatable lvSize="small" [lvPaginator]='page' [lvData]="storageDiskTableData"
                        formArrayName="diskStorage" #storageTable>
                        <thead>
                            <tr>
                                <th width="115px">{{'common_disk_name_label' | i18n}}</th>
                                <th width="85px">{{'common_slot_label' | i18n}}</th>
                                <th>{{'protection_disk_data_capacity_label' | i18n}}</th>
                                <th width="100px">{{'protection_vmware_restore_disktype_label' | i18n}}</th>
                                <th width="190px" lvShowCustom>
                                    {{'protection_tagert_database_label' | i18n}}
                                    <div lvCustom class="resource-sla-help">
                                        <i lv-icon="aui-icon-help"
                                            lv-tooltip="{{'protection_vm_restore_rdm_help_label' | i18n}}"
                                            lvTooltipPosition="rightTop"
                                            class="configform-constraint" lvColorState='true'></i>
                                    </div>
                                </th>
                                <th width="180px" lvShowCustom>
                                    <div lv-overflow>
                                        <span>{{'protection_tagert_database_capacity_label' | i18n}}</span>
                                        <div class="resource-sla-help">
                                            <i lv-icon="aui-icon-help"
                                                lv-tooltip="{{'protection_tagert_database_capacity_help_label'| i18n}}"
                                                lvTooltipPosition="rightTop" class="configform-constraint"
                                                lvColorState='true'></i>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let item of storageTable.renderData;">
                                <tr [formGroupName]="item.id">
                                    <td>
                                        <span lv-overflow>{{item.name}}</span>
                                    </td>
                                    <td>{{item.slot}}</td>
                                    <td>{{ formGroup.value.diskStorage[item.id]?.diskCapacity |
                                        capacityCalculateLabel:'1.1-3':unitconst.KB: true }}
                                    </td>
                                    <!-- 硬盘类型 -->
                                    <ng-container>
                                        <td *ngIf="item.isRDM">
                                            <lv-select [lvOptions]='diskTypeOps' formControlName='diskType'
                                                lvValueKey='value' [lvDisabled]='item.disableDiskType'></lv-select>
                                        </td>
                                        <td *ngIf="!item.isRDM">
                                            {{'protection_vmware_restore_normal_type_label' | i18n}}
                                        </td>
                                    </ng-container>
                                    <!-- 不同数据存储--目标数据存储 -->
                                    <td *ngIf="formGroup.value.storage === DatastoreType.DIFFERENT">
                                        <lv-select [lvOptions]='formGroup.value.diskStorage[item.id]?.options'
                                            formControlName="diskDatastore" lvPanelClass="diskstore-panel"
                                            [lvContentTemplate]='contentTpl' [lvPlaceholder]="(datastoreNoData?'protection_restore_new_datastore_placeholder_label' :
                                            'common_select_label') | i18n" lvShowFilter lvFilterKey="label"
                                            lvFilterMode="contains">
                                            <lv-select-trigger>
                                                <span>
                                                    <i [lv-tooltip]="formGroup.value.diskStorage[item.id]?.diskDatastore?.errorTip"
                                                        *ngIf="formGroup.value.diskStorage[item.id]?.diskDatastore?.errorTip"
                                                        lv-icon='lv-icon-status-warning-info' class="icon-warning"></i>
                                                    <span class="datastore-label"
                                                        lv-overflow>{{formGroup.value.diskStorage[item.id]?.diskDatastore?.label}}</span></span>
                                            </lv-select-trigger>
                                            <ng-template #contentTpl let-item>
                                                <div>
                                                    <i *ngIf="item.errorTip" [lv-tooltip]="item?.errorTip"
                                                        lv-icon='lv-icon-status-warning-info' class="icon-warning"></i>
                                                    <span class="datastore-label" lv-overflow>
                                                        {{item?.label}}</span>
                                                </div>
                                            </ng-template>
                                        </lv-select>
                                    </td>
                                    <!-- 相同数据存储--目标数据存储 -->
                                    <ng-container *ngIf="formGroup.value.storage === DatastoreType.SAME">
                                        <!-- rdm盘 -->
                                        <td *ngIf="item.isRDM && item.isChange">
                                            <lv-select [lvOptions]='formGroup.value.diskStorage[item.id]?.options'
                                                formControlName="diskDatastore" lvPanelClass="diskstore-panel"
                                                [lvContentTemplate]='contentTpl' [lvPlaceholder]="(datastoreNoData?'protection_restore_new_datastore_placeholder_label' :
                                                                        'common_select_label') | i18n">
                                                <lv-select-trigger>
                                                    <span>
                                                        <i [lv-tooltip]="formGroup.value.diskStorage[item.id]?.diskDatastore?.errorTip"
                                                            *ngIf="formGroup.value.diskStorage[item.id]?.diskDatastore?.errorTip"
                                                            lv-icon='lv-icon-status-warning-info'
                                                            class="icon-warning"></i>
                                                        <span class="datastore-label"
                                                            lv-overflow>{{formGroup.value.diskStorage[item.id]?.diskDatastore?.label}}</span></span>
                                                </lv-select-trigger>
                                                <ng-template #contentTpl let-item>
                                                    <div>
                                                        <i *ngIf="item.errorTip" [lv-tooltip]="item?.errorTip"
                                                            lv-icon='lv-icon-status-warning-info'
                                                            class="icon-warning"></i>
                                                        <span class="datastore-label" lv-overflow>
                                                            {{item?.label}}</span>
                                                    </div>
                                                </ng-template>
                                            </lv-select>
                                        </td>
                                        <!-- 普通盘 -->
                                        <td *ngIf="!item.isRDM || !item.isChange">{{formGroup.value.targetDatastore ?
                                            formGroup.value.targetDatastore.label : '--'}}</td>
                                    </ng-container>
                                    <!-- 剩余容量 -->
                                    <td *ngIf="formGroup.value.storage === DatastoreType.DIFFERENT">
                                        {{ formGroup.value.diskStorage[item.id]?.diskDatastore ?
                                        (formGroup.value.diskStorage[item.id]?.diskDatastore?.freeSpace |
                                        capacityCalculateLabel:'1.1-3':unitconst.KB: true ) :'--'
                                        }}</td>
                                    <td
                                        *ngIf="formGroup.value.storage === DatastoreType.SAME && (!item.isRDM || !item.isChange)">
                                        {{ sameFreeSpace || sameFreeSpace === 0 ?
                                        (sameFreeSpace |
                                        capacityCalculateLabel:'1.1-3':unitconst.KB: true ) :'--'
                                        }}</td>
                                    <td
                                        *ngIf="formGroup.value.storage === DatastoreType.SAME && (item.isRDM && item.isChange)">
                                        {{ formGroup.value.diskStorage[item.id]?.diskDatastore ?
                                        (formGroup.value.diskStorage[item.id]?.diskDatastore?.freeSpace |
                                        capacityCalculateLabel:'1.1-3':unitconst.KB: true ) :'--'
                                        }}</td>
                                </tr>
                            </ng-container>
                        </tbody>
                    </lv-datatable>
                    <div class="aui-paginator-wrap">
                        <lv-paginator #page lvMode="simple" [lvPageSize]="pageSize" [lvShowPageSizeOptions]="false"
                            [hidden]="!storageDiskTableData?.length">
                        </lv-paginator>
                    </div>
                </div>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item *ngIf="formGroup.get('network').controls.length > 0">
            <lv-form-label lvRequired>{{'common_network_location_label' | i18n}}</lv-form-label>
            <lv-form-control>
                <lv-datatable lvSize="small" [lvData]="[{}]" formArrayName="network" #networkTable>
                    <thead>
                        <tr>
                            <th>{{'common_network_adapter_label' | i18n}}</th>
                            <th>{{'common_network_name_label' | i18n}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of formGroup.get('network').controls;let i = index">
                            <tr [formGroupName]="i">
                                <td>
                                    <span lv-overflow>{{item.value.adapterName}}</span>
                                </td>
                                <td>
                                    <lv-select formControlName="networkName" [lvOptions]='networkOptions'
                                        lvValueKey="key" [lvPlaceholder]="(networkNoData?'protection_restore_new_network_placeholder_label' :
                                        'common_select_label') | i18n" lvShowFilter lvFilterKey="label"
                                        lvFilterMode="contains">
                                    </lv-select>
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>
                </lv-datatable>
            </lv-form-control>
        </lv-form-item>
    </ng-container>

    <lv-form-item class="auto-power-switch-item">
        <lv-form-label>
            {{'protection_startup_network_adaptor_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_startup_network_adaptor_desc_label' | i18n}}"
                lvTooltipPosition="rightTop"  class="configform-constraint"
                lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control>
            <lv-switch formControlName="startupNetworkAdaptor"></lv-switch>
            <span class="configform-constraint" *ngIf="formGroup.value.startupNetworkAdaptor">
                <div class="startup-network-adaptor-warn" lv-overflow>
                    {{'protection_startup_network_adaptor_warn_label' | i18n}}
                </div>
            </span>
        </lv-form-control>
    </lv-form-item>

    <lv-form-item *ngIf="restoreType === RestoreType.CommonRestore" class="auto-power-switch-item">
        <lv-form-label>
            <div [ngClass]="{'auto-power-switch-en-us': isEn, 'auto-power-switch-zh-cn': !isEn}" lv-overflow>
                {{'protection_auto_power_on_label' | i18n}}
            </div>
        </lv-form-label>
        <lv-form-control>
            <lv-switch formControlName="powerOn"></lv-switch>
        </lv-form-control>
    </lv-form-item>
    <ng-container *ngIf="formGroup.value.restoreLocation === restoreLocationType.ORIGIN">
        <lv-form-item>
            <lv-form-label>{{'protection_delete_origin_vm_label' | i18n}}</lv-form-label>
            <lv-form-control>
                <lv-switch formControlName="deleteOriginalVM"
                    [lvDisabled]="rowCopy?.resource_status === dataMap.Resource_Status.notExist.value"></lv-switch>
                <span *ngIf="formGroup.value.deleteOriginalVM" class="delete-vm-mgl">
                    <i lv-icon="lv-icon-status-warning-info" lvColorState='true' class="type-icon"></i>
                    <span>
                        {{'protection_delete_origin_vm_warn_label' | i18n}}
                    </span>
                </span>
            </lv-form-control>
        </lv-form-item>
    </ng-container>
    <lv-form-item *ngIf="restoreType === RestoreType.CommonRestore">
        <lv-form-label>
            {{'protection_vm_restore_nbdssl_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_vm_restore_nbdssl_help_label' | i18n}}"
                lvTooltipPosition="rightTop"  class="configform-constraint"
                lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control>
            <lv-switch formControlName="isForceNBDSsl"></lv-switch>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item *ngIf="restoreType === RestoreType.CommonRestore">
        <lv-form-label>
            {{'protection_start_snap_gen_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_start_snap_gen_tip_label' | i18n}}"
                lvTooltipPosition="rightTop"  class="configform-constraint"
                lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control>
            <lv-switch formControlName="isStartupSnapGen" [lvDisabled]="!isSupport"></lv-switch>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item *ngIf="restoreType === RestoreType.CommonRestore">
        <lv-form-label>
            {{'protection_clients_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_proxy_host_help_label' | i18n}}"
                lvTooltipPosition="rightTop"  class="configform-constraint"
                lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control>
            <lv-select lvShowClear [lvOptions]='proxyHostOptions' formControlName='proxyHost' lvValueKey='value'
                lvMode="multiple" lvShowFilter lvShowCheckAll lvFilterKey="label" lvFilterMode="contains"
                [lvContentTemplate]="contentTpl" lvPlaceholder="{{'protection_agent_placeholder_label' | i18n}}">
            </lv-select>
            <ng-template #contentTpl let-item>
                <lv-group lvGutter="4px">
                    <i lv-icon="{{
                      item.link_status === dataMap.resource_LinkStatus.normal.value ? 'aui-host-online' : 'aui-host-offline'
                    }}"></i>
                    <span>{{ item.label }}</span>
                </lv-group>
            </ng-template>
        </lv-form-control>
    </lv-form-item>
</lv-form>
